<template>
    <div>
      <!-- 评估项管理模块 -->
      <div id="headA">
        <div id="head">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'welcome' }">养老服务管理系统</el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #666666;">配置管理</span></el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'PingGuMoBan' }"><span style="color: #666666;">评估模板管理</span></el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #666666;">评估项管理</span></el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #3C763D;">项值管理</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div id="XZGLshang">
        <span style="display: block; font-size: 20px; font-weight: 700; padding-top: 10px; margin-left: 10px;">搜索条件</span>
        <div style="width: 100%; height: 4px; background-color: #E7EAEC; margin-top: 10px;"></div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: -10px;">
          <el-form-item label="评估值名称：" id="XZGLshangc">
            <el-input v-model="formInline.pgzname" placeholder="" id="XZGLshanga"></el-input>
          </el-form-item>
          <el-form-item label="控件类型：" id="XZGLshangc">
            <el-select v-model="formInline.kjtype"  clearable size="small" placeholder="请选择" style="width: 100px;">
              <el-option label="单选" :value="1"></el-option>
              <el-option label="多选" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：" id="XZGLshangc">
            <el-select v-model="formInline.status"  clearable size="small" placeholder="请选择" style="width: 100px;">
              <el-option label="启用" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分值：" id="XZGLshangc">
            <el-input v-model="formInline.fenzhi" placeholder="" size="small" style="width: 100px; height: 30px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit" id="XZGLshangb">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="XZGLxia">
        <div style="margin-left: 28px; padding-top: 20px; padding-bottom: 15px;">
          <el-row>
            <el-button size="small" type="success" @click.native="onAdd" plain>新建</el-button>
            <el-button size="small" type="primary" @click.native="onCha()" plain>查看</el-button>
            <el-button size="small" type="warning" @click.native="onXiu()" plain>修改</el-button>
            <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="dels">
              <el-button type="danger" slot="reference" size="small" style="margin: 10px;" plain>删除</el-button>
            </el-popconfirm>
            <el-button size="small" type="success" @click.native="onQi()" plain>启用</el-button>
            <el-button size="small" type="primary" @click.native="onJin()" plain>禁用</el-button>
            <!-- <el-button size="small" type="warning" @click.native="xiangZhiGuanLi" plain>项值管理</el-button> -->
            <el-button size="small" type="danger" @click.native="onFanHui()" plain>返回</el-button>
          </el-row>
        </div>
        <div>
          <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="90" label="序号" :index="indexAdd"></el-table-column>
            <el-table-column prop="pgzname" label="评估值名称" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pgname" label="评估项名称" width="150" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="所属模板" width="200">
              <template slot-scope="scope">{{ scope.row.mobanname }}</template>
            </el-table-column> -->
            <el-table-column label="控件类型" prop="kjtype" width="150">
              <template slot-scope="scope">{{ scope.row.kjtype == 1 ? '单选' : '多选' }}</template>
            </el-table-column>
            <el-table-column prop="fenzhi" label="分值" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" width="80">
              <template slot-scope="scope">{{ scope.row.status == 0 ? '启用' : '禁用' }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block" style="margin-top: 20px; margin-left: 30px;">
        <el-pagination
          @size-change="xianshi"
          @current-change="yema"
          :current-page="formInline.dqNum"
          :page-sizes="[10, 20, 50]"
          :page-size="formInline.xsNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div>
        <!-- 新增修改信息模块 ------------------------------------------------------------>
        <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" :append-to-body="true">
          <el-form :model="form1" :rules="rules" ref="form1">
            <div id="XZGLshangd">
              <el-form-item id="XZGLshange" label="评估值名称：" prop="pgzname" :label-width="formLabelWidth">
                <el-input size="mini" v-model="form1.pgzname" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </div>
            <div style=" width: 320px; height: 100px; margin-top: -36px; margin-left: 300px;">
              <el-form-item label="控件类型：" id="XZGLshangg" prop="kjtype">
                <el-select v-model="form1.kjtype" size="small" placeholder="请选择" id="XZGLshangh">
                  <el-option label="单选" :value="1"></el-option>
                  <el-option label="多选" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item id="XZGLshanghi" label="分值：" prop="fenzhi" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form1.fenzhi" autocomplete="off" placeholder="" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="状态:" id="XZGLshanghj" prop="status">
              <el-radio v-model="form1.status" :label="0">启用</el-radio>
              <el-radio v-model="form1.status" :label="1">禁用</el-radio>
            </el-form-item>
            <el-form-item label="描述:" style="margin-left: 62px; margin-top: -30px;">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form1.miaoshu" style="width: 350px; margin-top: -20px; margin-left: 7px;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addXiangZhiGuanLi('form1')" v-show="isAdd">确 定</el-button>
            <el-button type="primary" @click="editXiangZhiGuanLi('form1')" v-show="!isAdd">保 存</el-button>
            <el-button @click="dialogFormVisible=false">取 消</el-button>
          </div>
        </el-dialog>
        <div>
          <el-drawer title="查看" :visible.sync="dialog" direction="ltr" :append-to-body="true" custom-class="demo-drawer" ref="drawer">
            <div class="demo-drawer__content">
              <el-form :model="formc">
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 0px;">
                  <el-form-item label="评估值名称：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.pgzname" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 0px;">
                  <el-form-item label="控件类型：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.kjtype" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 0px;">
                  <el-form-item label="分值：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.fenzhi" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 20px;">
                  <el-form-item label="状态：" :label-width="formcLabelWidth" >
                    <el-input v-model="formc.status" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 20px;">
                  <el-form-item label="添加人：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.founder" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 21px; margin-top: 20px;">
                  <el-form-item label="添加时间：" :label-width="formcLabelWidth">
                    <el-input v-model="formc.createdate" autocomplete="off" disabled size="small"></el-input>
                  </el-form-item>
                </div>
                <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 20px; float: left;">
                  <el-form-item label="描述:">
                    <el-input type="textarea" disabled :autosize="{ minRows: 2, maxRows: 4}" v-model="formc.miaoshu" style="width: 250px; margin-top: -45px; margin-left: 50px; float: right;"></el-input>
                  </el-form-item>
                </div>
              </el-form>
              <div class="demo-drawer__footer" style="margin-left: 160px; margin-top: 90px;">
                <el-button @click="cancelForm">取 消</el-button>
              </div>
            </div>
          </el-drawer>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formInline: {
          pgzname: '',
          kjtype: '',
          status: '',
          fenzhi: '',
          dqNum: 1,
          xsNum: 10,
        },
        tableData: [{
          noid: '',
          pgzname: '',
          pgname: '',
          kjtype: '',
          fenzhi: '',
          status: '',
        }],
        form1: {
          pgzname: '',
          kjtype: '',
          fenzhi: '',
          status: '',
          miaoshu: '',
          founder: '',
          createdate: '',
          updatedate: '',
          pgid: '',
        },
        rules: {
          pgzname: [
            { required: true, message: '请输入模板名称', trigger: 'blur' }
          ],
          kjtype: [
            { required: true, message: '请选择控件类型', trigger: 'change' }
          ],
          fenzhi: [
            { required: true, message: '请输入分值', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
        },
        formc: {
          pgzname: '',
          kjtype: '',
          fenzhi: '',
          status: '',
          founder: '',
          createdate: '',
          miaoshu: '',
        },
        zhuid: '',
        daid: '',
        total: 0,
        isAdd: true,
        dialogFormVisible: false,
        formLabelWidth:'200px',
        formcLabelWidth: '100px',
        multipleSelection: [],
        visible: false,
        dialog: false,
        loading: false,
      }
    },
    methods: {
      chaxun(){
        let all = {
          pgzname: this.formInline.pgzname,
          kjtype: this.formInline.kjtype,
          status: this.formInline.status,
          fenzhi: this.formInline.fenzhi,
          dqNum: 1,
          xsNum: 10,
          daid: this.daid
        }
        axios.post("/chain-api/xiangzhiguanli/page", all).then(res=>{
          this.tableData = res.data.list;
          this.total = res.data.total;
        })
      },
      onSubmit(){
        this.formInline.dqNum = 1;
        this.chaxun();
      },
      onAdd(){
        this.isAdd = true;
        this.dialogFormVisible = true;
        this.form1.pgzname = '';
        this.form1.kjtype = '';
        this.form1.fenzhi = '';
        this.form1.status = '';
        this.form1.miaoshu = '';
        this.form1.founder = '';
        this.form1.createdate = '';
        this.form1.updatedate = '';
        this.form1.pgid = '';
      },
      addXiangZhiGuanLi(form1){
        this.$refs[form1].validate((valid) => {
          if (valid) {
            this.isAdd = false;
            this.dialogFormVisible = false;
            this.form1.founder = this.$store.state.loginuserinfo.userName;
            this.form1.createdate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()),
            this.form1.pgid = this.daid;
            axios.post("/chain-api/xiangzhiguanli/addxiangzhiguanli", this.form1).then(res=>{
              if(res.data.code){
                this.$message('增加成功');
              }else{
                this.$message('增加失败');
              }
              this.onSubmit();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onQi(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length > 1) {
          this.$message.error("只能选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          axios.get("/chain-api/xiangzhiguanli/qidong/" + aid).then(res=>{
            if(res.data.code){
              this.$message('启动成功');
            }else{
              this.$message('启动失败');
            }
            this.onSubmit();
          });
        }
      },
      onJin(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length > 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          axios.get("/chain-api/xiangzhiguanli/jinyong/" + aid).then(res=>{
            if(res.data.code){
              this.$message('禁用成功');
            }else{
              this.$message('禁用失败');
            }
            this.onSubmit();
          });
        }
      },
      onCha(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.dialog = true;
          axios.get("/chain-api/xiangzhiguanli/" + aid).then(res=>{
            this.formc = res.data.data;
            if (this.formc.status == 0) {
              this.formc.status = '启用';
            } else {
              this.formc.status = '禁用';
            }
            if (this.formc.kjtype == 1) {
              this.formc.kjtype = '单选';
            } else {
              this.formc.kjtype = '多选';
            }
          });
        }
      },
      onXiu(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.isAdd = false;
          this.dialogFormVisible = true;
          axios.get("/chain-api/xiangzhiguanli/" + aid).then(res=>{
            this.form1 = res.data.data;
          });
        }
      },
      editXiangZhiGuanLi(form1){
        this.$refs[form1].validate((valid) => {
          if (valid) {
            this.dialogFormVisible=false;
            this.form1.updatedate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()),
            axios.put("/chain-api/xiangzhiguanli/updatexzgl",this.form1).then(res=>{
              if(res.data.code){
                this.$message('修改成功');
              }else{
                this.$message('修改失败');
              }
              this.onSubmit();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //删除
      dels() {
        let ids = this.multipleSelection.map(value => value.noid)//[{}]=>[1,2]
        if (ids.length == "") {
          this.$message.error("请选择！")
          this.onSubmit();
        } else {
          axios.post("/chain-api/xiangzhiguanli/dels", ids).then(res => {
            if (res.data.code) {
              this.$message.success("批量删除成功！")
              this.onSubmit()
            } else {
              this.$message.error("批量删除失败！")
              this.onSubmit()
            }
          })
        } 
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
      xianshi(a){
        this.formInline.xsNum = a;
        this.chaxun();
      },  
      yema(a){
        this.formInline.dqNum = a;
        this.chaxun();
      },
      onFanHui(){
        this.$router.push({
          path: "/main/PingGuXiangGuanLi",
          query: {zhuid: this.zhuid}
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // type序号 - 页面切换递增
      indexAdd(index) {
        const dq = this.formInline.dqNum; // 当前页码
        const xs = this.formInline.xsNum; // 每页条数
        return index + 1 + (dq - 1) * xs;  // 下标 + 1 + (当前页码 - 1) * 当前页显示的条数
      },
    },
    mounted(){
      this.zhuid = this.$route.query.zhuid;
      this.daid = this.$route.query.daid;
      this.chaxun()
    }
  }
  </script>
  
  <style scope>
  #head{
    width: 1050px;
    height: 25px;
    padding-left: 20px;
    padding-top: 10px;
    margin-left: 20px;
    border: 8px groove skyblue;
    background-color: #DFF0D8;
  }
  #headA{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #XZGLshang{
    width: 1090px;
    height: 110px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #XZGLxia{
    width: 1090px;
    height: 350px;
    margin-top: 25px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #XZGLshanga{
    width: 150px;
    height: 30px;
  }
  #XZGLshangb{
    /* width: 75px;
    height: 38px; */
    font-size: 14px;
    background-color: #18A689;
    margin-top: 27px;
    margin-left: 18px;
  }
  #XZGLshangc{
    margin-top: 25px;
    margin-left: 25px;
  }
  #XZGLshangd{
    width: 350px;
    height: 40px;
    /* float: left; */
    /* display: inline-block; */
    margin-top: -25px;
    margin-left: -84px;
  }
  #XZGLshange{
    display: inline;
    width: 400px;
    height: 40px;
  }
  #XZGLshangf{
    width: 340px;
    height: 40px;
    margin-top: -55px;
    margin-left: 60px;
    margin-right: 0px;
    /* float: right; */
    /* display: inline-block; */
    /* background-color: aqua; */
  }
  #XZGLshangg{
    /* float: right; */
    width: 310px;
    height: 90px;
    /* background-color: blue; */
    /* margin-top: -20px; */
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #XZGLshangh{
    /* float: left; */
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 0px;
  }
  #XZGLshanghi{
    width: 300px;
    height: 90px;
    margin-top: -50px;
    margin-left: -85px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #XZGLshanghj{
    width: 300px;
    height: 90px;
    margin-top: -112px;
    margin-left: 328px;
    padding-left: 0px;
    padding-right: 0px;
  }
</style>